<template>
  <el-select
    v-model="schoolPosition"
    placeholder="请选择"
    :props="defaultProps"
    :treeData="positionTree">
    <el-option
      v-for="item in positionTree"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
</template>

<script lang="ts" setup>
import {
  computed,
  defineProps, getCurrentInstance, onMounted, ref, withDefaults,
} from 'vue';
import Request from '../../api/request/request';

const { proxy } = getCurrentInstance(); // 使用proxy代替ctx，因为ctx只在开发环境有效
// 加载职务数据
interface Tree {
  id:number;
  name: string;
}

interface Props {
  modelValue: any,
  data?: Array<Tree>|null,
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: () => null,
});

const defaultProps = { // 下拉菜单显示标签对应的属性名
  value: 'id',
  label: 'name',
};

const positionTree = ref<Tree[]>([]);// 定义下拉菜单
const getPosition = async () => {
  const resData:any = await new proxy.$Request(`${proxy.$urls.API_URL_BACKSTAGE_SCHOOLPOSITION_MANAGE}`).get();
  if (resData.success) {
    positionTree.value = resData.data.data;
  }
};
if (props.data == null) { // 如果没有值传进来
  onMounted(getPosition);
} else {
  positionTree.value = [];
}

// 对职务属性进行监听
const schoolPosition = ref(computed({
  get() { // 不能在get里面改变nodeName.value的值所以在watch里面进行修改
    // nodeName.value=treeRef.value.getNode(props.modelValue).data["name"];
    return props.modelValue;
  },
  set(val) {
    proxy.$emit('update:modelValue', val);// 则传递给父组件
  },
}));
</script>

<style scoped>

</style>
